<header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <h4 class="mb-0 pointer-events-none">
        {{ 'Story.LinkedAnalysis.Title' | translate: {Default: "Linked Analysis"} }}
    </h4>
</header>

<mat-dialog-content class="mat-typography flex flex-col justify-start items-stretch overflow-hidden">
    <form [formGroup]="formGroup" class="w-80 flex flex-col justify-start items-stretch gap-4">
        <mat-radio-group formControlName="interactionApplyTo" class="flex flex-col gap-2" aria-label="Select an option" >
            <mat-radio-button *ngFor="let option of applyTos" [value]="option">
                {{ 'Story.LinkedAnalysis.' + option | translate: {Default: option} }}
            </mat-radio-button>
        </mat-radio-group>

        <mat-slide-toggle *ngIf="interactionApplyTo === LinkedInteractionApplyTo.OnlySelectedWidgets" class="w-full flex justify-end items-center px-4"
            style="display: flex;"
            formControlName="connectNewly"
            labelPosition="before"
            >
            {{ 'Story.LinkedAnalysis.ConnectNewly' | translate: {Default: 'Connect Newly'} }}
        </mat-slide-toggle>

        <div class="flex-1 overflow-auto">
            <mat-selection-list *ngIf="interactionApplyTo === LinkedInteractionApplyTo.OnlySelectedWidgets" class="w-full" displayDensity="cosy"
                formControlName="linkedWidgets">
                <mat-list-option *ngFor="let widget of widgets" [value]="widget.key" class="rounded-lg">
                    {{widget.caption}}
                </mat-list-option>
            </mat-selection-list>
        </div>
    </form>
</mat-dialog-content>

<mat-dialog-actions class="flex justify-between items-center">
    <div></div>
    <div ngmButtonGroup>
        <button mat-flat-button mat-dialog-close>
            {{ 'Story.Common.Cancel' | translate: {Default: 'Cancel'} }}
        </button>
        <button mat-raised-button color="accent" cdkFocusInitial [matDialogClose]="formGroup.value">
            {{ 'Story.Common.Apply' | translate: {Default: 'Apply'} }}
        </button>
    </div>
</mat-dialog-actions>
